<template>
  <div class="app-container">
    <!--    任务数-->
    <div class="mission">
      <div class="top">
        <div class="top-NDFAnomaly">
          <img
            src="../assets/images/totalAnomaly.png"
            class="top-totalAnomaly-img"
          />
          <div class="top-son">
            <div class="issue">AVG小车总数</div>
            <div class="count">{{ avgnum }}<span>辆</span></div>
          </div>
        </div>
        <div class="top-NDFAnomaly">
          <img
            src="../assets/images/NDFAnomaly.png"
            class="top-totalAnomaly-img"
          />
          <div class="top-son">
            <div class="issue">执行中</div>
            <div class="count">{{ executing }}<span>辆</span></div>
          </div>
        </div>
        <div class="top-NDFAnomaly">
          <img
            src="../assets/images/NDFAnomaly.png"
            class="top-totalAnomaly-img"
          />
          <div class="top-son">
            <div class="issue">空闲</div>
            <div class="count">{{ unexecuted }}<span>辆</span></div>
          </div>
        </div>
        <div class="top-NDFAnomaly">
          <img
            src="../assets/images/NDFAnomaly.png"
            class="top-totalAnomaly-img"
          />
          <div class="top-son">
            <div class="issue">异常/故障</div>
            <div class="count">{{ fault }}<span>辆</span></div>
          </div>
        </div>
      </div>
      <!--    数据看板按钮-->
      <div class="LookBtn">
        <button class="LookBtn1" @click="dataBoard">首页数据看板</button>
        <button class="LookBtn2" @click="dataBoard2">备料数据看板</button>
        <button class="LookBtn3" @click="dataBoard1">下线数据看板</button>
      </div>
    </div>
    <!--   表格 -->
    <div>
      <el-table :data="templateList" class="styleTable">
        <el-table-column
          label="AVG编号"
          prop="agvCode"
          align="left"
          :show-overflow-tooltip="true"
        />
        <el-table-column
          label="电量状态"
          prop="battery"
          align="left"
          :show-overflow-tooltip="true"
        />
        <el-table-column
          label="异常/故障原因"
          prop="errReason"
          align="left"
          :show-overflow-tooltip="true"
        />
      </el-table>
      <pagination
        class="pagination"
        v-show="total > 0"
        :total="total"
        :page.sync="queryParams.pageNo"
        :limit.sync="queryParams.pageSize"
        @pagination="getAgverror"
      />
    </div>
    <!--    柱状图-->
    <div class="pillarl">
      <div ref="pillarlLeft" class="leftPillarl"></div>
      <div ref="pillarlRight" class="rightPillarl"></div>
    </div>
    <!--    切换图号/产线选择框-->
    <div class="selectLineTuData">
      <!--      <el-select v-model="selectLineTuData" filterable allow-create placeholder="请选择产线/图号" clearable class="sel">-->
      <!--        <el-option v-for="(item, index) in selectLineTu" :key="index" :label="item.label" :value="item.value"/>-->
      <!--      </el-select>-->
      <el-tabs v-model="selectLineTuData" @tab-click="handleClick">
        <el-tab-pane label="产线" name="1"></el-tab-pane>
        <el-tab-pane label="图号" name="0"></el-tab-pane>
      </el-tabs>
    </div>
    <!--    产线饼状图-->
    <div class="circle" v-if="selectLineTuData == '1'">
      <Cricle
        :dataValue="item.dataValues"
        :prodLine="item.productCode"
        :typeCri="typeCri"
        v-for="(item, i) in CricleL"
        class="circleOne"
        :class="{ circleQi: i === 7 }"
      ></Cricle>
    </div>
    <!--    图号饼状图-->
    <div class="circle" v-if="selectLineTuData == '0'">
      <Cricle
        :dataValue="item.dataValues"
        :prodLine="item.productCode"
        :typeCri="typeCri"
        v-for="(item, i) in CricleT"
        class="circleOne"
        :class="{ circleQi: i === 7 }"
      ></Cricle>
    </div>
  </div>
</template>
<script>
import Cricle from "@/views/circle.vue";
import {
  getAgverror,
  getAgvStatus,
  getProdWithLineORImgCode,
  getImgCodeCountNum,
} from "@/api/index";

export default {
  components: {
    Cricle,
  },
  data() {
    return {
      templateList: null,
      total: 0,
      queryParams: {pageNo: 1, pageSize: 10},
      CricleL: null, //饼图产线数据
      CricleT: null, //饼图图号数据
      typeCri: [
        "备料未进行数量",
        "备料进行中数量",
        "备料已完成数量",
        "下线未进行数量",
        "下线进行中数量",
        "下线已完成数量",
      ],
      queryParams1: {type: 1}, //饼图产线参数
      queryParams2: {type: 2}, //饼图图号参数
      pillarlist: [],
      selectLineTu: [
        {label: "产线", value: true},
        {label: "图号", value: false},
      ],
      selectLineTuData: '1',
      avgnum: null,
      executing: null,
      fault: null,
      unexecuted: null,
    };
  },
  mounted() {
    this.pillarlLeft();
    this.pillarlRight();
    this.getList();
    this.getAgverror();
    this.getProdWithLineORImgCode1();
    this.getProdWithLineORImgCode2();
  },
  methods: {
    handleClick(tab, event) {
      console.log(tab.label, event)
      if (tab.label == "产线") {
        this.selectLineTuData = '1'
      } else if (tab.label == "图号") {
        this.selectLineTuData = "0"
      }
    },
    //AVG小车总数
    getList() {
      getAgvStatus().then((res) => {
        this.avgnum = res.data.avgnum;
        this.executing = res.data.executing;
        this.fault = res.data.fault;
        this.unexecuted = res.data.unexecuted;
      });
    },
    //AVG编号表格数据
    getAgverror() {
      getAgverror(this.queryParams).then((res) => {
        this.templateList = res.data.list;
        this.total = res.data.total;
      });
    },
    // 获取左柱形图的数据
    pillarlLeft() {
      getImgCodeCountNum().then((res) => {
        if (res) {
          const dataKeys = Object.keys(res.data); // 获取所有的键名
          const keysArray = dataKeys.filter(
            (key) =>
              key.startsWith("prodinstatus") ||
              key.startsWith("prodintotalCount")
          ); // 过滤出需要的键名
          const valuesArray = keysArray.map((key) => res.data[key]); // 获取每个键名对应的值
          const chartBox = this.$echarts.init(this.$refs.pillarlLeft);
          const option = {
            // 设置图表的标题
            title: {
              text: "当日备料生产计划数量情况",
              textStyle: {
                fontSize: 18,
                color: "black",
              },
              left: "center", // 设置标题水平居中
              top: "10px",
            },
            tooltip: {
              trigger: "axis",
              axisPointer: {
                type: "shadow",
              },
            },
            xAxis: {
              // data: this.datelist,
              data: ["总任务数量", "待执行", "进行中", "已完成", "延误/故障"],
              // data: keysArray,
              axisTick: {
                show: false, //取消坐标刻度线
              },
              axisLabel: {
                color: "rgb(27,40,58)", // 设置x轴刻度文字颜色
              },
            },
            yAxis: {
              axisLabel: {
                color: "rgb(27,40,58)", // 设置x轴刻度文字颜色
              },
              splitLine: {
                lineStyle: {
                  // 设置背景横线
                  color: "#E0E6F1",
                  width: 2, // 设置背景横线宽度
                },
              },
            },
            series: [
              {
                type: "bar",
                // data: this.countlist,
                data: valuesArray,
                barWidth: 30,
                itemStyle: {
                  color: "rgb(147,190,255)", // 设置柱形颜色
                },
                label: {
                  show: true,
                  position: "top",
                  formatter: function (params) {
                    return params.value;
                  },
                  textStyle: {
                    color: "black",
                    fontSize: 12,
                  },
                },
              },
            ],
          };
          chartBox.setOption(option);
          // 根据页面大小自动响应图表大小
          window.addEventListener("resize", function () {
            chartBox.resize();
          });
        }
      });
    },
    // 获取右柱形图的数据
    pillarlRight() {
      getImgCodeCountNum().then((res) => {
        if (res) {
          const dataKeys = Object.keys(res.data); // 获取所有的键名
          const keysArray = dataKeys.filter(
            (key) =>
              key.startsWith("prodoutstatus") ||
              key.startsWith("prodouttotalCount")
          ); // 过滤出需要的键名
          const valuesArray = keysArray.map((key) => res.data[key]); // 获取每个键名对应的值
          const chartBox = this.$echarts.init(this.$refs.pillarlRight);
          const option = {
            // 设置图表的标题
            title: {
              text: "当日下线生产计划数量情况",
              textStyle: {
                fontSize: 18,
                color: "black",
              },
              left: "center", // 设置标题水平居中
              top: "10px",
            },
            tooltip: {
              trigger: "axis",
              axisPointer: {
                type: "shadow",
              },
            },
            xAxis: {
              // data: this.datelist,
              data: ["总任务数量", "待执行", "进行中", "已完成", "延误/故障"],
              axisTick: {
                show: false, //取消坐标刻度线
              },
              axisLabel: {
                color: "rgb(27,40,58)", // 设置x轴刻度文字颜色
              },
            },
            yAxis: {
              axisLabel: {
                color: "rgb(27,40,58)", // 设置x轴刻度文字颜色
              },
              splitLine: {
                lineStyle: {
                  // 设置背景横线
                  color: "#E0E6F1",
                  width: 2, // 设置背景横线宽度
                },
              },
            },
            series: [
              {
                type: "bar",
                // data: this.countlist,
                data: valuesArray,
                barWidth: 30,
                itemStyle: {
                  color: "rgb(47,81,255)", // 设置柱形颜色
                },
                label: {
                  show: true,
                  position: "top",
                  formatter: function (params) {
                    return params.value;
                  },
                  textStyle: {
                    color: "black",
                    fontSize: 12,
                  },
                },
              },
            ],
          };
          chartBox.setOption(option);
          // 根据页面大小自动响应图表大小
          window.addEventListener("resize", function () {
            chartBox.resize();
          });
        }
      });
    },
    // 获取产线饼图的数据
    getProdWithLineORImgCode1() {
      getProdWithLineORImgCode(this.queryParams1).then((res) => {
        let data = res.data;
        const newArray = data.map((obj) => ({
          prodLine: obj.productCode,
          dataValues: [
            {prodinstatus0: obj.prodinstatus0},
            {prodinstatus1: obj.prodinstatus1},
            {prodinstatus2: obj.prodinstatus2},
            {prodoutstatus0: obj.prodoutstatus0},
            {prodoutstatus1: obj.prodoutstatus1},
            {prodoutstatus2: obj.prodoutstatus2},
          ],
          productCode: obj.prodLine,
        }));
        this.CricleL = newArray;
      });
    },
    // 获取图号饼图的数据
    getProdWithLineORImgCode2() {
      getProdWithLineORImgCode(this.queryParams2).then((res) => {
        let data = res.data;
        const newArray = data.map((obj) => ({
          prodLine: obj.prodLine,
          dataValues: [
            {prodinstatus0: obj.prodinstatus0},
            {prodinstatus1: obj.prodinstatus1},
            {prodinstatus2: obj.prodinstatus2},
            {prodoutstatus0: obj.prodoutstatus0},
            {prodoutstatus1: obj.prodoutstatus1},
            {prodoutstatus2: obj.prodoutstatus2},
          ],
          productCode: obj.productCode,
        }));
        this.CricleT = newArray;
      });
    },
    /** 首页数据看板 */
    dataBoard() {
      const {href} = this.$router.resolve("/indexBoard");
      const newWindow = window.open(href, "_blank");
      if (newWindow) {
        newWindow.addEventListener("load", () => {
          newWindow.dispatchEvent(new KeyboardEvent("keydown", {key: "F11"}));
        });
      }
      // screenfull.toggle()
    },
    /** 下线数据看板 */
    dataBoard1() {
      const {href} = this.$router.resolve("/outProdPlanBoard");
      const newWindow = window.open(href, "_blank");
      if (newWindow) {
        newWindow.addEventListener("load", () => {
          newWindow.dispatchEvent(new KeyboardEvent("keydown", {key: "F11"}));
        });
      }
      // screenfull.toggle()
    },
    /** 备料数据看板 */
    dataBoard2() {
      const {href} = this.$router.resolve("/inProdPlanBoard");
      const newWindow = window.open(href, "_blank");
      if (newWindow) {
        newWindow.addEventListener("load", () => {
          newWindow.dispatchEvent(new KeyboardEvent("keydown", {key: "F11"}));
        });
      }
      // screenfull.toggle()
    },
  },
};
</script>
<style scoped lang="scss">
::v-deep .el-tabs__item {
  font-size: 16px !important;
  font-weight: bold;
}

.mission {
  display: flex;
}

.selectLineTuData {
  margin-bottom: 20px;
  width: 100%;
  display: flex;
  justify-content: flex-end;
}

.LookBtn {
  width: 300px;
  height: 100px;
  display: flex;
  margin-left: 10px;

  .LookBtn1 {
    background-color: rgb(130, 47, 255);
    color: #ffffff;
    width: 100px;
    height: 100px;
    border: none;
    border-radius: 2px;
    cursor: pointer;
  }

  .LookBtn2 {
    background-color: rgb(49, 185, 238);
    color: #ffffff;
    width: 100px;
    height: 100px;
    border: none;
    border-radius: 2px;
    margin: 0px 5px;
    cursor: pointer;
  }

  .LookBtn3 {
    background-color: rgb(2, 86, 255);
    color: #ffffff;
    width: 100px;
    height: 100px;
    border: none;
    border-radius: 2px;
    cursor: pointer;
  }
}

.pillarl {
  margin-top: 20px;
  margin-bottom: 20px;
  width: 100%;
  height: 280px;
  display: flex;
  justify-content: space-around;

  .leftPillarl {
    width: 49%;
    height: 100%;
    margin-right: 1%;
    background-color: #ffffff;
  }

  .rightPillarl {
    width: 49%;
    height: 100%;
    margin-left: 1%;
    background-color: #ffffff;
  }
}

.circle {
  width: 100%;
  //height: 250px;
  height: 600px;
  display: flex;
  overflow: hidden;
  justify-content: space-around;
  flex-wrap: wrap;

  .circleOne {
    height: 49%;
    width: 23.5%;
    background-color: #fff;
    margin-bottom: 10px !important;
    margin-right: 15px;
  }

  .circleOne:nth-child(4n) {
    margin-bottom: 15px;
    margin-right: 0px;
  }

  .circleQi {
    margin-right: 0px;
  }
}

.top {
  height: 100px;
  width: calc(100% - 300px);
  display: flex;
  justify-content: space-around;
  align-items: center;
  //padding-top: 20px;
  margin-bottom: 20px;
  background-color: #fff;
  border-radius: 4px;

  .top-totalAnomaly {
    display: flex;
    position: relative;
    top: 20px;
    margin-left: 20px;
    width: 350px;

    .top-son {
      width: 260px;
      height: 100px;
    }

    .top-totalAnomaly-img {
      //border:2px solid red;
      width: 54px;
      height: 54px;
    }
  }
}

.top-NDFAnomaly {
  display: flex;
  position: relative;
  top: 20px;

  .top-totalAnomaly-img {
    width: 54px;
    height: 54px;
    margin-right: 15px;
  }
}

.top-son {
  //border:1px solid blue;
  width: 190px;
  height: 100px;
  //margin-left: 20px;
  //display: flex;
  //align-items: center;
  //justify-content: center;
}

.issue {
  font-size: 14px;
  white-space: nowrap; /* 防止文本换行 */
  overflow: hidden; /* 隐藏溢出部分 */
  text-overflow: ellipsis; /* 显示省略号 */
}

.issueWi {
  width: 320px !important;
}

.count {
  font-size: 34px;
  font-weight: bold;
  margin: 4px 0;

  span {
    font-size: 12px;
    margin-left: 18px;
    font-weight: normal;
  }
}
</style>
